<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://localhost:8080/layui/css/layui.css">

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <script type="text/javascript" src="http://localhost:8080/layui/layui.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
</head>
<body>
<div class="nav"><h3>宠物商店后台管理系统 </h3></div>
<div class="row">
    <!--    左侧导航栏-->
    <div class="rowleft">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            <li id="data" class="layui-nav-item"><a href="/petback/data">产品和用户数据</a></li>
            <li id="pet" class="layui-nav-item">
                <a href="javascript:;">商品管理</a>
                <dl class="layui-nav-child">
                    <dd><a id="cat" href="/petback/cats">管理--猫</a></dd>
                    <dd><a id="dog" href="/petback/dogs">管理--狗</a></dd>
                    <dd><a id="fish" href="/petback/reptiles">管理--鱼</a></dd>
                    <dd><a id="birds" href="/petback/birds">管理--鸟</a></dd>
                </dl>
            </li>
            <li id="order" class="layui-nav-item"><a href="/petback/order">订单管理</a></li>
            <li id="user" class="layui-nav-item"><a href="/petback/user">用户信息管理</a></li>
        </ul>
    </div>
    <!--    右侧搜索栏-->
    <div style="display: flex;flex-direction: column; align-items: center">
        <div class="rightbody" style="width: 100%;display: flex;flex-direction: column;align-items: center;">
            <div class="orderdetailsbody"
                 style="margin-top: 30px; box-shadow: 0px 0px 25px #c3c3c3;width:1100px;height:400px;display: flex;flex-direction: row;justify-content: flex-start">
                <div style="width: 300px;height: 400px; display:flex;flex-direction: column;align-items: center">
                    <img src="https://img0.baidu.com/it/u=1721391133,702358773&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625"
                         alt="" style="margin-top: 50px; width: 250px;height: 300px">
                </div>
                <div class="textcontent1"
                     style="display: flex;flex-direction: column;align-items: center; width: 400px;height: 400px">
                    <div style="display: flex;flex-direction: column;align-items: center;width: 380px;height: 350px;margin-top: 25px;border:solid 1px #c3c3c3;">
                        <text style="margin-top: 20px; width:380px; font-size:25px;text-align: center">订单信息</text>
                        <text style="width: 360px;margin-top: 30px; margin-left: 20px;">ItemID: EST-1</text>
                        <text style="width: 360px;margin-top: 30px; margin-left: 20px;">Total_Price: 80</text>
                        <text style="width: 360px;margin-top: 30px; margin-left: 20px;">Create_Time: 2002.2.9</text>
                        <text style="width: 360px;margin-top: 30px; margin-left: 20px;">Company: 韵达快递</text>
                    </div>
                </div>
                <div class="textcontent2"
                     style="display: flex;flex-direction: column;align-items: center; width: 400px;height: 400px">
                    <div style="display: flex;flex-direction: column;align-items: center;width: 380px;height: 350px;margin-top: 25px;border:solid 1px #c3c3c3;">
                        <div style=" display:flex;flex-direction: column;align-items: center; width: 380px;height: 306px;">
                            <text style="margin-top: 20px; width:380px; font-size:25px;text-align: center">用户信息</text>
                            <div style="width: 360px;margin-top: 30px; margin-left: 20px; display: flex;flex-direction: row;justify-content: flex-start;">
                                <text style="width: 60px;">Name:</text>
                                <input disabled="disabled" style="width: 200px;margin-left: 30px;" id="Name" type="text"
                                       class="form-control" placeholder="Name"
                                       aria-label="Accepter" aria-describedby="addon-wrapping">
                            </div>

                            <div style="width: 360px;margin-top: 30px; margin-left: 20px; display: flex;flex-direction: row;justify-content: flex-start;">
                                <text style="width: 60px;">Phone:</text>
                                <input disabled="disabled" style="width: 200px;margin-left: 30px;" id="Phone"
                                       type="text" class="form-control" placeholder="Phone"
                                       aria-label="Accepter" aria-describedby="addon-wrapping">
                            </div>
                            <div style="width: 360px;margin-top: 30px; margin-left: 20px; display: flex;flex-direction: row;justify-content: flex-start;">
                                <text style="width: 60px;">Address:</text>
                                <input disabled="disabled" style="width: 200px;margin-left: 30px;" id="Address"
                                       type="text" class="form-control" placeholder="Address"
                                       aria-label="Accepter" aria-describedby="addon-wrapping">
                            </div>
                            <div style="margin-top:55px;margin-right: 10px;  width: 380px; display: flex;flex-direction: row;justify-content:flex-end;">
                                <button id="change" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                                    修改
                                </button>
                                <button id="sure" type="button" class="layui-btn layui-btn-radius layui-btn-danger">确定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-right: 5px; display: flex;flex-direction: row;justify-content:flex-end;width: 1100px;height: 50px">
                <button id="option" style="width:80px;" type="button" class="btn btn-primary">
                    发货
                </button>
            </div>

        </div>
    </div>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58"
            crossorigin="anonymous"></script>
</div>
</body>

<script>
    let number = window.location.search.split("=")[1];
    $.ajax({
        url: "http://localhost:8080/petback/order/getOrderByNumber/" + number,
        type: "GET",
        contentType: "application/json",
        dataType: "text",
        success: function (data) {
            let json = JSON.parse(data);
            console.log(json)
            let textBox = $(".textcontent1>div>text")
            $(textBox[1]).text("Itemid:   " + json.msg.itemid);
            $(textBox[2]).text("Total_Price:   " + json.msg.totalPrice);
            $(textBox[3]).text("Create_Time:   " + json.msg.createTime.substring(0, 10));
            $(textBox[4]).text("Company:   " + json.msg.company);

            let textBox2 = $(".textcontent2 input")
            $(textBox2[0]).val(json.msg.name);
            $(textBox2[1]).val(json.msg.phone);
            $(textBox2[2]).val(json.msg.address);

            if(json.msg.status !== 0){
                $("#option").attr("disabled",true).text("已发货")

            }
        }
    })

    $.ajax({
        url: 'http://localhost:8080/petback/order/getPictureByNumber/'+number,
        type: 'GET',
        contentType:'application/json',
        dataType:'text',
        success: function (data) {
            let json = JSON.parse(data);
            $("img").attr("src",json.msg)
        }
    })
    $("#option").click(function () {
        $.ajax({
            url:"http://localhost:8080/petback/order/updateStatusByNumber",
            type: "POST",
            contentType: "application/json",
            dataType: "JSON",
            data: JSON.stringify({
                "number": number,
            }),
            success: function (data) {
                layer.msg("发货成功");
                setTimeout(function () {
                    location.reload();
                },1000)
            }
        })
    });

    $("#change").click(function () {
        $(".textcontent2 input").removeAttr("disabled");
    })

    $("#sure").click(function () {
        let user_info = $(".textcontent2 input");
        user_info.attr("disabled","disabled");
        $.ajax({
            url:"http://localhost:8080/petback/order/updateOrderByNumber",
            type: "POST",
            contentType: "application/json",
            dataType: "JSON",
            data: JSON.stringify({
                "number": number,
                "name": $(user_info[0]).val(),
                "phone": $(user_info[1]).val(),
                "address": $(user_info[2]).val()
            }),
            success: function (data) {
                layer.msg("修改成功");
            }
        })

    })

</script>

<style>
    .nav {
        background-color: #9F9F9F;
        width: 100%;
        height: 50px;
        text-align: center;
    }

    .rowleft {
        width: 200px;
        height: 550px;
        background-color: #393d49;
    }

    .row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    text {
        font-size: 20px;
    }
</style>

</html>
